JavaScript Popup Menu v2

This page contains popup menu used for automatically selecting a page or URL

Please note that JavaScript is currently only available in Netscape Navigator 2.0 or later, and in Internet Explorer for MacOS version 3.0.1 or later. Do not assume that all in your audience are using a JavaScript enabled browser.

Here is another example on how JavaScript can be used in a form with a popup menu that has links to other pages. This example does not require a special "Go" button, the actions takes place after a selection is made in the pop up menu.

Select a Page:
NOTE: The pages may fail to load when using this example with Internet Explorer and the pages to be loaded are stored on your local disk. It should work correctly with pages stored on a Web-server though.
How to use
The source of the popup menu looks like this: 

<FORM>
<SELECT NAME="menu" onChange="top.location.href =
 this.form.menu.options[this.form.menu.selectedIndex].value">
<OPTION SELECTED VALUE="index.html">Contents 
<OPTION VALUE="groucho.html">Groucho 
<OPTION VALUE="harpo.html">Harpo 
<OPTION VALUE="chico.html">Chico 
<OPTION VALUE="zeppo.html">Zeppo 
</SELECT>
</FORM>

Change the links and text to be displayed in the menu by editing the lines containing the OPTION tags. Note that you can also use full URL's in the VALUE attribute.

Programming notes

The actual JavaScript is in the selection list's onChange handler. The JavaScript array this.form.menu.options is an array of the option tags (with its contents) in the form named "menu". To find which menu item that is selected we can use the property this.form.menu.selectedIndex, that holds the index of the selected item.

We then get the name of the page by accessing the value attribute of the selected item in the array with the expression this.form.menu.options[this.form.menu.selectedIndex].value.

top.location.href is the address of the url to be displayed in the window. Since we set top.location to contain the new pages URL, the new page will be displayed in the entire window, even if our page is inside a frame.

If you want to change the contents inside a specific frame, you can try to replace top with the top.frames.name_of_the_frame. For example, if the frame is named "contact" in the frame definition page, the frame's source can be accessed like this: top.frames.contact.location.href.